<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>

    <h1>售价：{{price}}元</h1>
    <button @click="buy(5, $event)">可乐5元</button>
    <button @click="buy(10)">咖啡10元</button>
    <button @click="buy(8)">牛奶8元</button>
</div>
<script src="vue.js"></script>
<script>
    /**
     * <button v-on:事件名="处理函数(实参)">按钮
     * v-on: 简写为 @
     * 传参：
     * 1. 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
     * 2. 如果传递了参数，则实参 $event 表示事件对象，固定用法。
     */
    const app = new Vue({
        el: '#app',
        data: {
            isShow: true,
            price: 0.0
        },
        methods: {
            fn(e) {
                this.isShow = !this.isShow;
                console.log(e)
            },
            buy(p, e) {
                this.price = p
                console.log(e)
            }
        }
    })
</script>
</body>
</html>